<!-- 水质仪图表 -->
<template>
  <div class="water-charts">
    <van-nav-bar :title="title" left-arrow @click-right="goData" @click-left="() => $router.go(-1)" safe-area-inset-top>
      <template #left>
        <img style="width: 25px" src="../../assets/images/返回2.png" alt="" />
      </template>
      <template #right>
        <img style="width: 25px" src="../../assets/images/日历 (1).png" alt="" />
      </template>
    </van-nav-bar>

    <!-- 内容 -->
    <div class="content">
      <div class="title">设备编号：{{ info.dev_sn }}</div>
      <div class="grid">
        <div :class="tab == index ? 'item active' : 'item'" v-for="(item, index) in properties" v-bind:key="index"
          @click="tabChange(item,index)">
          {{ item.name }}
        </div>
        <!-- <div :class="tab == 2 ? 'item active' : 'item'" @click="tabChange(2)">
          溶解氧浓度
        </div>
        <div :class="tab == 3 ? 'item active' : 'item'" @click="tabChange(3)">
          水温
        </div>
        <div :class="tab == 4 ? 'item active' : 'item'" @click="tabChange(4)">
          PH值
        </div> -->
      </div>
      <!-- echart -->
      <div class="grid">

        <div v-for="(item, index) in table" v-bind:key="index" style="width:20%;text-align: center;">
          {{ item.value }} {{item.unit}}
        </div>
      </div>

      <div id="echart"></div>
      <div style="margin-top:10px">
        <table class="table">
          <tr>
            <td>日期</td>
            <td>{{typename}}</td>
          </tr>
          <tr v-for="(item, index) in list" v-bind:key="index">
            <td>{{item.time}}</td>
            <td>{{item.value}} {{ getunit(typename)}}</td>
          </tr>
        </table>
      </div>
    </div>
  </div>
</template>

<script>
import { Toast, Dialog } from 'vant';

import { sensorHistorySimData, sensorInfo, sensorData } from "../../api/sensor";

export default {
  name: "",
  data() {
    return {
      tab: 0,
      info: {},
      properties: [],
      title: '',
      type: '',
      table: [],
      typename: "",
      list: []
    };
  },

  methods: {
    // echarts 数据
    getLoadEcharts(xData, yData) {
      var myChart = this.$echarts.init(document.getElementById("echart"));
      // var yData = [820, 932, 901, 934, 1290, 1330, 1320];
      // var xData = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
      var option = {
        grid: {
          top: "10%",
          left: "15%",
          bottom: "10%",
        },
        xAxis: {
          splitLine: {
            show: true,
          },
          type: "category",
          boundaryGap: false,
          data: xData,
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: yData,
            type: "line",
            areaStyle: {
              color: "rgb(245,246,250)",
            },
          },
        ],
      };
      myChart.setOption(option);
    },
    // 点击tab切换数据
    tabChange(value, index) {
      this.tab = index;
      console.log("value", value);
      this.type = value.id;
      this.typename =value.name;
      this.getData();



    },
    // 进度条数据
    goData() {


      var code = this.$route.query.code;

      this.$router.push({ path: "/water-details", query: { code: code } });
    },
    async getData() {
      var code = this.$route.query.code;

      let res = await sensorHistorySimData({ userid: localStorage.getItem("userid"), code: code, type: this.type });


      console.log("res", res);
      if (res.status == 200) {

        var properties = res.data.list;
        this.list = res.data.list;


        if (properties.length > 0) {

          let xData = [];
          let yData = [];
          for (let i = 0; i < properties.length; i++) {
            xData.push(properties[i].time);
            yData.push(properties[i].value);
          }

          this.getLoadEcharts(xData, yData);



        }
      }
    },
    async getInfo() {
      let res = await sensorInfo({ code: this.$route.query.code });
      if (res.status == 200) {
        var info = res.data;
        this.info = info;
        var metadata = JSON.parse(info.metadata);
        var properties = metadata.properties;

        console.log("properties", properties);

        this.properties = properties;
        if (properties.length > 0) {

          this.type = properties[0].id;
          this.typename = properties[0].name;

          this.getData();
        }

      }
    },
    async getTable() {
      let res = await sensorData({ code: this.$route.query.code, userid: localStorage.getItem("userid") });
      if (res.status == 200) {
        console.log("ss111111111111111", res.data);

        let list = res.data.properties;
        for (var i = 0; i < list.length; i++) {

          console.log("list", list[i].name);
          if (list[i].name == "溶解氧饱和度") {
            list[i].unit = "%";
          } else if (list[i].name == "溶解氧浓度") {
            list[i].unit = "mg";
          } else if (list[i].name == "水温") {
            list[i].unit = "℃";
          } else if (list[i].name == "水质Ph") {
            list[i].unit = "";
          } else if (list[i].name == "Ph计水温") {
            list[i].unit = "℃";
          }

        }


        console.log("mylist", list);

        this.table = list;
      }
    },
    getunit(name) {
      if (name == "溶解氧饱和度") {
        return "%";
      } else if (name == "溶解氧浓度") {
        return "mg";
      } else if (name == "水温") {
        return "℃";
      } else if (name == "水质Ph") {
        return "";
      } else if (name == "Ph计水温") {
        return "℃";
      }

    }
  },
  computed: {},
  watch: {},
  created() {
    this.getInfo();
    this.getTable();

    console.log("ss", this.$route.query)

  },
  mounted() {
    //  this.getLoadEcharts();
  },
};
</script>

<style lang="scss" scoped>
.water-charts {
  width: 100%;
  height: 100%;

  .content {
    width: 92%;
    margin: 30px auto 0;
    background-color: #fff;
    border-radius: 15px;
    padding: 50px 30px;

    #echart {
      margin-top: 50px;
      width: 100%;
      height: 360px;
    }

    .grid {
      margin-top: 30px;
      border-radius: 15px;
      width: 100%;
      height: 80px;
      line-height: 80px;
      font-size: 24px;
      display: flex;
      overflow: hidden;
      background-color: rgb(233, 233, 233);

      .active {
        color: #fff;
        background-color: rgb(94, 154, 246);
      }

      .item {
        width: 20%;
        text-align: center;
      }
    }

    .title {
      font-size: 26px;
      font-weight: 600;
    }
  }
}

.table {
  margin-top: 10px;
  width: 100%;
  border-collapse: collapse;
  text-align: center;

  td {
    border: 1px solid #ccc;

  }
}
</style>